<template>
  <view 
    class="comp-skeleton"
    :class="{ animate: loading && animate }"
    :style="groupStyle">
    <template v-if="loading">
      <template v-for="(item, itemIndex) in list">
        <template v-if="item.children && item.children.length">
          <skeleton
            :key="itemIndex"
            :groupStyle="item.groupStyle"
            :loading="loading"
            :list="item.children">
          </skeleton>
        </template>
        
        <skeleton-item  
          v-else
          :key="itemIndex"
          :images="item.images"
          :imageWidth="item.imageWidth"
          :imageHeight="item.imageHeight"
          :imageShape="item.imageShape"
          :titles="item.titles"
          :titleWidth="item.titleWidth"
          :titleheight="item.titleheight"
          :rows="item.rows"
          :wrapperStyle="item.wrapperStyle" />
      </template>
    </template>
    <view v-else><slot></slot></view>
  </view>
</template>

<script>
import skeletonItem from './skeleton-item'
import skeleton from '@/components/basic/skeleton/index.vue'
export default {
  name: 'skeleton',
  components: {skeletonItem, skeleton},
  props: {
    loading: {
      type: Boolean,
      default: true,
    },
    color: { // 占位内容颜色
      type: String,
      default: '#F9F9F9'
    },
    list: {
      type: Array,
      default: () => []
    },
    groupStyle: {
      type: String,
      default: ''
    },
    animate: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  },
  computed: {
  }
}
</script>

<style scoped>
.comp-skeleton.animate {
  animation: skeleton-blink 1.2s ease-in-out infinite;
}

@keyframes skeleton-blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
</style>
